import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

export default function TabBar({ type }) {
  const navList = [
    {
      title: '首页',
      icon: 'icon-attention',
      value: 'home',
      path: '/pages/index/index',
    },
    {
      title: '商城',
      icon: 'icon-attention',
      value: 'store',
    },
    {
      title: '消息',
      icon: 'icon-experience',
      value: 'message',
    },
    {
      title: '我的',
      icon: 'icon-recommend',
      value: 'my',
      path: '/pages/user/index',
    },
  ]

  const handleSwitch = item => {
    if (item.path) {
      Taro.switchTab({
        url: item.path,
      })
    }
  }
  return (
    <>
      <View className="nav_bar flex">
        {navList.map((item, index) => {
          return (
            <View className="nav_bar_item" key={index}>
              <View
                style={{
                  opacity: type === item.value ? '1' : '.7',
                }}
                onClick={() => handleSwitch(item)}
                className="nav_bar_item_title"
              >
                {item.title}
              </View>
            </View>
          )
        })}
      </View>
      <View className="warpper"></View>
    </>
  )
}
